<template>
  <div class="hello">
    <App></App>
    <x-header>我的收藏</x-header>

    <!--搜索区域-->
    <search
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      top="46px"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>

    <!--列表-->
    <swipeout>
      <swipeout-item @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')" transition-mode="follow">
        <div slot="right-menu">
          <swipeout-button @click.native="onButtonClick('delete')" type="warn">删除</swipeout-button>
        </div>
        <div slot="content" class="demo-content vux-1px-t">
          <div class="weui-media-box weui-media-box_text"><div class="weui-media-box_appmsg"><div class="weui-media-box__hd"><img src="http://placeholder.qiniudn.com/60x60/3cc51f/ffffff" alt="" class="weui-media-box__thumb"></div> <div class="weui-media-box__bd"><h4 class="weui-media-box__title">标题一</h4> <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div></div> <ul class="weui-media-box__info"><li class="weui-media-box__info__meta">水利</li> <li class="weui-media-box__info__meta">2018-06-06</li> <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">991次</li></ul></div>
        </div>
      </swipeout-item>
      <swipeout-item @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')" transition-mode="follow">
        <div slot="right-menu">
          <swipeout-button @click.native="onButtonClick('delete')" type="warn">删除</swipeout-button>
        </div>
        <div slot="content" class="demo-content vux-1px-t">
          <div class="weui-media-box weui-media-box_text"><div class="weui-media-box_appmsg"><div class="weui-media-box__hd"><img src="http://placeholder.qiniudn.com/60x60/3cc51f/ffffff" alt="" class="weui-media-box__thumb"></div> <div class="weui-media-box__bd"><h4 class="weui-media-box__title">标题一</h4> <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p></div></div> <ul class="weui-media-box__info"><li class="weui-media-box__info__meta">水利</li> <li class="weui-media-box__info__meta">2018-06-06</li> <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">991次</li></ul></div>
        </div>
      </swipeout-item>
    </swipeout>


    <!-- 排序 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="sortIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择" show-bottom-border="false"
          @on-click-left="sortIsShow = false"
          @on-click-right="sortIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="sortOptions" :value="sortChecked"></radio>
        </group>
      </popup>
    </div>

    <!-- 分类 弹出选择框-->
    <div v-transfer-dom>
      <popup v-model="catalogIsShow">
        <popup-header
          left-text="取消" right-text="确定" title="请选择" show-bottom-border="false"
          @on-click-left="catalogIsShow = false"
          @on-click-right="catalogIsShow = false"></popup-header>
        <group gutter="0">
          <radio :options="catalogOptions" :value="catalogChecked"></radio>
        </group>
      </popup>
    </div>

    <!--底部操作栏-->
    <tabbar style="position: fixed">
      <tabbar-item @on-item-click="showSort()">
        <img slot="icon" src="../../assets/images/tabbar/sort.png">
        <span slot="label" style="color:#666">排序</span>
      </tabbar-item>
      <tabbar-item @on-item-click="showCatalog()">
        <img slot="icon" src="../../assets/images/tabbar/filter.png">
        <span slot="label" style="color:#666">分类</span>
      </tabbar-item>
    </tabbar>

  </div>
</template>
<script>
import App from '../../App'
import { Tabbar, TabbarItem, Group, Cell, XHeader, Search, PopupHeader, Popup, TransferDom, Radio, Panel, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'ApiLike',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Search,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    PopupHeader,
    Popup,
    TransferDom,
    Radio,
    Panel,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  data () {
    return {
      // 底部弹框
      sortIsShow: false,
      catalogIsShow: false,
      sortOptions: [{key: 1, value: '默认排序'}, {key: 2, value: '调用量'}],
      sortChecked: 1,
      catalogOptions: [{key: 1, value: '全部'}, {key: 2, value: '水利'}, {key: 3, value: '电力'}, {key: 4, value: '住建'}, {key: 5, value: '桥梁'}],
      catalogChecked: 1,
      // 列表类型
      apiListType: '5',
      apiList: [
        {
          src: '',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/component/radio',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '991次'
          }
        },
        {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '/component/radio',
            replace: false
          },
          meta: {
            source: '水利',
            date: '2018-06-06',
            other: '991次'
          }
        }],
      apiListFooter: {
        title: '更多'
      }
    }
  },
  methods: {
    // 搜索
    onSubmit () {

    },
    // 显示排序
    showSort () {
      this.sortIsShow = true
    },
    // 显示分类
    showCatalog () {
      this.catalogIsShow = true
    },
    // 加载api
    loadApi () {
      var item = {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        },
        meta: {
          source: '水利',
          date: '2018-06-06',
          other: '991次'
        }
      }
      this.apiList.push(item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

